<template>
	<view class="index">
		<view class="tips">
			<text class="dot">●</text>月统计情况:总支出:{{expenditureSum}}元
		</view>
		 <qiun-data-charts type="column" :localdata="localdata" v-if="localdata.length && expendShow"/>
		 <view class="no-data" v-else-if="!localdata.length && expendShow">
		 	<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fac3f363-66dc-48a8-b358-79fd0858441a/5cb36826-9dbb-40d7-ba81-20026578b42b.jpg" mode=""></image>
		 </view>
		 <view class="cu-form-group">
		 	<view class="title">日期</view>
		 	<picker mode="date" :value="date" fields="month" @change="dateChange">
		 		<view class="picker">
		 			{{date}}
		 		</view>
		 	</picker>
		 </view>
		 <view class="tips">
		 	<text class="dot">●</text>日统计情况:总支出:{{currentSum}}元
		 </view>
		  <qiun-data-charts type="column" :localdata="currentData" v-if="currentData.length && currentDayShow"/>
		  <view class="no-data" v-else-if="!currentData.length && currentDayShow">
		  	<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fac3f363-66dc-48a8-b358-79fd0858441a/5cb36826-9dbb-40d7-ba81-20026578b42b.jpg" mode=""></image>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				localdata:[],
				date:'',
				expenditureSum:0,
				year:'',
				month:'',
				day:'',
				currentData:[],
				currentSum:0,
				expendShow:false,
				currentDayShow:false,
			}
		},
		onShow() {
			uni.showLoading();
			this.expenditureSum = 0;
			this.currentSum = 0;
			this.currentDayShow = false;
			this.expendShow = false;
			const myDate = new Date();
			this.year = myDate.getFullYear();
			const month = myDate.getMonth();
			const m = month + 1;
			if (m.toString().length == 1) {
				m = "0" + m;
			}
			this.month = m;
			this.day = myDate.getDate();
			this.date = this.year + '-' + m;
			this.getStatisticsData();
			this.getStatisticsData('currentDay');
		},
		methods: {
			dateChange(e){
				let date = new Date(e.detail.value);
				this.year = date.getFullYear();
				this.month = date.getMonth()+1;
				if (this.month.toString().length == 1) {
					this.month = "0" + this.month;
				}
				this.date = this.year + '-' + this.month;
				this.day = date.getDate();
				this.getStatisticsData()
			},
			getStatisticsData(type){
				let params = {
					uid:uni.getStorageSync('userInfo')._id,
					year:this.year,
					month:this.month,
					day:this.day
				}
				if(type){
					params.currentDay = type;
				}
				uniCloud.callFunction({
					name:'record',
					data:{
						action:'statistics',
						params
					},
					success: (res) => {
						uni.hideLoading();
						let data;
						data = res.result;
						data.forEach((row=>{
							row.value = Number(row.price);
							row.group = row.text;
							row.text = `${row.month}月`;
							if(type){
								this.currentSum += Number(row.price)
							}else{
								this.expenditureSum += Number(row.price);
							}
						}))
						if(type){
							this.currentData = data;
							this.currentSum = Number(this.currentSum).toFixed(2);
							this.currentDayShow = true;
						}else{
							this.localdata = data;
							this.expenditureSum = Number(this.expenditureSum).toFixed(2);
							this.expendShow = true;
						}
						if(!this.localdata.length) this.expenditureSum = 0
					},
					fail: () => {
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">

.index{
	padding: 0 20rpx;
	box-sizing: border-box;
	.cu-form-group{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tips{
		border-bottom: 1rpx solid #F5F5F5;
		padding: 20rpx 0;
		color:#666;
		.dot{
			font-size: 40rpx;
			color:#1296DB;
			margin:0 20rpx;
		}
	}
}
</style>
